/**
 * 自己封装可复用的钩子函数（数据和逻辑）
 */
// 导入监控元素或组件是否在视口
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
/**
 *
 * @param {*} apiFn 发送后台请求的方法
 */
export function useObserve (apiFn) {
  // 执行监控
  const target = ref(null) // 被监控的元素
  const { stop } = useIntersectionObserver(
    target,
    // 注意：被监控的元素target，进入和离开可视区，都会执行回调函数
    ([{ isIntersecting }]) => {
      // 组件数据懒加载：在视口发请求=》只发一次
      // console.log('新鲜好物是否在视口：', isIntersecting)
      if (isIntersecting) {
        // 在视口发请求
        apiFn()
        // 关闭监控
        stop()
      }
    },
    {
      // 阈值：0-1 =》设置为0，加速接口请求
      threshold: 0
    }
  )

  return { target }
}
